function Leaderboard({ scores, playerName, gameStarted, currentLevel, isLoading, initialLoadComplete }) {
    const [activeTab, setActiveTab] = React.useState('daily');
    const [isOpen, setIsOpen] = React.useState(false);
    const [isSmallScreen, setIsSmallScreen] = React.useState(false);

    React.useEffect(() => {
        const checkScreenSize = () => {
            setIsSmallScreen(window.innerWidth < 1170);
        };

        checkScreenSize();
        window.addEventListener('resize', checkScreenSize);

        return () => {
            window.removeEventListener('resize', checkScreenSize);
        };
    }, []);

    const toggleLeaderboard = () => {
        setIsOpen(!isOpen);
    };

    const handleScoreClick = (scoreId) => {
        // Handle score click if needed
        console.log('Score clicked:', scoreId);
    };

    const currentScores = activeTab === 'daily' ? scores.daily : scores.historical;

    const renderLeaderboardPanel = () => (
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-80 max-h-[60vh] flex flex-col">
            <div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 sticky top-0 z-10" data-name="leaderboard-header">
                <div className="flex items-center justify-between">
                    <h2 className="text-xl font-bold text-gray-900 dark:text-white" data-name="leaderboard-title">
                        Leaderboard
                    </h2>
                    {isLoading && <LoadingSpinner size="sm" />}
                </div>
            </div>
            <div className="sticky top-[72px] z-20">
                <LeaderboardTabs
                    activeTab={activeTab}
                    onTabChange={setActiveTab}
                />
            </div>
            <div className="overflow-y-auto flex-1">
                {(!initialLoadComplete || currentScores.length === 0) && isLoading ? (
                    <div className="flex items-center justify-center h-32" data-name="loading-state">
                        <LoadingSpinner />
                    </div>
                ) : (
                    <LeaderboardContent
                        scores={currentScores}
                        playerName={playerName}
                        gameStarted={gameStarted}
                        currentLevel={currentLevel}
                        onScoreClick={handleScoreClick}
                        isLoading={isLoading}
                    />
                )}
            </div>
        </div>
    );

    if (isSmallScreen) {
        return (
            <div className="fixed bottom-4 right-4 z-50" data-name="mobile-leaderboard">
                <button
                    onClick={toggleLeaderboard}
                    className={`bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700 text-white p-3 rounded-full shadow-lg flex items-center justify-center w-12 h-12 text-xl transition-transform duration-300 relative ${
                        isOpen ? 'rotate-180' : ''
                    }`}
                    data-name="mobile-leaderboard-toggle"
                >
                    {isLoading ? <LoadingSpinner size="sm" light /> : '🏆'}
                </button>

                {/* Backdrop */}
                {isOpen && (
                    <div 
                        className="fixed inset-0 bg-black/20 dark:bg-black/40 backdrop-blur-sm z-40"
                        onClick={toggleLeaderboard}
                        data-name="mobile-leaderboard-backdrop"
                    />
                )}

                <div 
                    className={`fixed bottom-20 right-4 transition-transform duration-300 transform ${
                        isOpen ? 'translate-x-0' : 'translate-x-full'
                    } z-50`}
                    data-name="mobile-leaderboard-panel"
                >
                    {renderLeaderboardPanel()}
                </div>
            </div>
        );
    }

    return (
        <div className="absolute top-4 left-4 z-50" data-name="desktop-leaderboard">
            {renderLeaderboardPanel()}
        </div>
    );
}
